<template>
	<div class="tz8-publish_msg" :ref="only"></div>
</template>

<script>
const messageType = ['info', 'success', 'warning', 'error'];

export default {
	data() {
		return {
			only: Math.round(Math.random() * 20127128),
			buffer: []
		}
	},
	
	methods: {
		add(message) {
			const { type, text } = message;
			if (messageType.includes(type)) {
				const theContainer = this.$refs[this.only];
				const msgSpan = document.createElement('span');
				msgSpan.classList.add(type);
				msgSpan.append(message.text);
				theContainer.prepend(msgSpan);
				msgSpan.classList.add('open');
				setTimeout(() => {
					msgSpan.remove();
				}, 4000)
			}
		},
		
		info(text) {
			this.add({ type: 'info', text })
		},
		
		success(text) {
			this.add({ type: 'success', text })
		},
		
		warning(text) {
			this.add({ type: 'warning', text })
		},
		
		error(text) {
			this.add({ type: 'error', text })
		}
	}
}
</script>

<style>
@keyframes tz8Message{
	0%{
		opacity: 0;
		transform: translateX(-100%);
	}
	10%{
		opacity: 1;
		transform: translateX(0);
	}
	90%{
		opacity: 1;
		transform: translateX(0);
	}
	100%{
		opacity: 0;
		transform: translateX(-100%);
	}
}
	
.tz8-publish_msg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-size: .8em;
}

.tz8-publish_msg span{
	transition: all .2s ease-in-out;
	padding: .3em .5em;
	border-radius: .3em;
	display: block;
	border: 1px solid #FFFFFF;
}

.tz8-publish_msg span+span {
	margin-top: .5em;
}

.tz8-publish_msg span.open {
	animation-name: tz8Message;
	animation-duration: 5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.tz8-publish_msg span.success {
	color: #67c23a;
	background-color: #f0f9eb;
	border-color: #e1f3d8;
}

.tz8-publish_msg span.info {
	color: #909399;
	background-color: #f4f4f5;
	border-color: #e9e9eb;
}

.tz8-publish_msg span.warning {
	color: #e6a23c;
	background-color: #fdf6ec;
	border-color: #faecd8;
}

.tz8-publish_msg span.error {
	color: #f56c6c;
	background-color: #fef0f0;
	border-color: #fde2e2;
}
</style>
